﻿<!DOCTYPE html>

<html lang="en" >
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--注释-->
    <title>hello world</title>
    <style>
        input[type="submit"]{
            width:170px;
            color:#ffffff;
            background-color:#0026ff;
        }
        h2{
            text-align:center;
        }
        table {
            border-spacing: 10px 15px;
            text-indent:510px;/*缩进*/
        }
        p{
            background-color:#4cff00ff;
            width:200px;
            height:100px;
            border: 4px solid blue;/*边框粗细，样式，颜色*/
            border-radius:10px;/*边框圆角*/
            padding-left:90px;/*调节内容与边框的距离，即内边距*/
            margin:auto;/*外边距*/
            position:sticky;/*粘性定位-相对与固定来回交换*/
            top:0;
        }
        .line{/*线性渐变*/
            width:200px;
            height:100px;
            background:linear-gradient(to right bottom,#fffb3087,#ff0000,#00ffff); 
        }
        .radial{/*径向渐变*/
            width:200px;
            height:100px;
            background:radial-gradient(circle 100px at 50% 50%,#0026ff,#ff00dc,#00ffff);
        }
        /*过渡*/
        .tra{
            width:80px;
            height:80px;
            background-color:blue;
            transition:all 2s;
        }
        .tra:hover{
            width:160px;
            height:160px;
            transform:rotate(180deg);
        }
    </style>
</head>
<body>
    <p>第一个网页</p>
    <img src="http://nocturne.bczcdn.com/file/1646125582615_85556/head.png" alt="图像" width="200px"><br />
    <a href="https://www.google.com.hk/"><img src="http://nocturne.bczcdn.com/file/1646125582615_85556/head.png" alt="图像" width="200px"></a>
    <a href="1.html"><img src="http://nocturne.bczcdn.com/file/1646125582615_85556/head.png" alt="图像" width="200px"><br /></a>
    <div>
        <h2>创建你的账号</h2>
        <form action="javascript:alert('登录成功！')">
            <table>
                <tr>
                    <td><input type="text" name="user" placeholder="用户名" required></td>
                </tr>
                <tr>
                    <td><input type="password" name="pwd" placeholder="密码" required /></td>
                </tr>
                <tr>
                    <td><input type="submit" value="登录"></td>
                </tr>
                <tr>
                    <td><a href="resiger.html">无账号？请注册</a></td>
                </tr>
            </table>
        </form>
    </div>
    <div class="line"></div>
    <div class="radial"></div>
    <div class="tra"></div>
</body>
</html>